<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上传文件</title>
  <style>
    .box{
      display: inline-block;
      width: 300px;
      height: 300px;
      background: #e0e0e0;
      margin-top: 15px;
    }
    .drop{
      width: 500px;
      height: 500px;
      background: #e0e0e0;
      margin-top: 15px;
    }
  </style>
</head>
<body>
<!--<input id="file" type="file" accept="image/*" multiple>-->

<div class="mark">
  <input id="file" type="file" multiple>
  <input id="sub" type="button" value="上传">
</div>
<div id="box" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>

<div id="drop" class="drop"></div>

<script src="main.js"></script>

<!--
File对象
   name：本地文件系统中的文件名。
   size：文件的字节大小。
   type：字符串，文件的MIME 类型。
   lastModifiedDate：字符串，文件上一次被修改的时间（只有Chrome 实现了这个属性）。

FileReade对象
   readAsText(file,encoding)：以纯文本形式读取文件，将读取到的文本保存在result 属性中。第二个参数用于指定编码类型，是可选的。
   readAsDataURL(file)：读取文件并将文件以数据URI 的形式保存在result 属性中。
   readAsBinaryString(file)：读取文件并将一个字符串保存在result 属性中，字符串中的每个字符表示一字节。
   readAsArrayBuffer(file)：读取文件并将一个包含文件内容的ArrayBuffer 保存在 result 属性中。

-->
</body>
</html>